<template>
  <el-row type="flex" class="task" justify="center" align="middle">
    <el-col :span="1">
      <!--    logo和菜单-->
      <el-dropdown trigger="click" size="mini">
        <el-button type="text" style="color: white">
          {{ emoji }}
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>...</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
    <el-col :span="19">
      <!--  app列表-->
        <div :class="'appTitle' + item.status + ' appTitle'" v-for="item in appList" :key="item.id" @click="openWin(item)">
          <p>{{ item.title }}</p>
        </div>
    </el-col>
    <el-col :span="1">
      <!--    系统网络-->
      <el-tooltip content="网络" placement="bottom" effect="light">
        <div>
          <el-image v-if="isNetwork" :src="require('../assets/icon/网络.png')" fit="cover" style="width: 25%;"></el-image>
          <el-image v-else :src="require('../assets/icon/网络 (1).png')" fit="cover" style="width: 25%"></el-image>
        </div>
      </el-tooltip>
    </el-col>
    <el-col :span="1">
      <!--    系统电量-->
      <el-tooltip :content="'电量:' + electricity.batteryLevel + '%'" placement="bottom" effect="light">
        <div>
          <el-image v-if="electricity.batteryCharging" :src="require('../assets/icon/电池-充电 (1).png')" fit="cover" style="width: 25%"></el-image>
          <el-image v-else :src="require('../assets/icon/电池-电量警告.png')" fit="cover" style="width: 25%"></el-image>
        </div>
      </el-tooltip>
    </el-col>
    <el-col :span="1">
      <!--    系统时间-->
      <div style="font-size: .3rem;">
        <p>{{ timeItem.date }}{{ timeItem.time }}</p>
<!--        <span></span>-->
      </div>
    </el-col>

  </el-row>
</template>

<script>
import SystemMenu from "@/components/SystemMenu";
export default {
name: "SystemTaskBar",
  data(){
    return{
      //电量信息
      electricity:{
        batteryCharging:false,
        batteryLevel:0
      },
      //时间信息
      timeItem:{
        time:new Date().toLocaleTimeString(),
        date:new Date().toLocaleDateString()
      },
      //是否联网
      isNetwork:false,

      // 启动的applist
      appList: this.$store.getters.taskList,
      showMenu: false,

      // emoji: '(๑•̀ㅂ•́)و✧',

      // 表情数组
      // emojis: [
      //     '(๑•̀ㅂ•́)و✧',
      //     'ミ●﹏☉ミ',
      //     'ヾ(≧▽≦*)o',
      //     '嗯~ o(*￣▽￣*)o',
      //     'o(￣▽￣)ｄ',
      //     '( ＾∀＾）／欢迎＼( ＾∀＾）',
      //     '||ヽ(*￣▽￣*)ノミ|Ю',
      //     '(o゜▽゜)o☆',
      //     'n(*≧▽≦*)n'
      // ]

      emoji: JSON.parse(sessionStorage.getItem('userInfo')).userName,
      // emoji1: JSON.parse(sessionStorage.getItem('userInfo')).nikeName,
    }
  },

  mounted() {
    this.timer()
  },

  methods: {
    logout(){
      this.$store.dispatch('logout').then(res => {
        this.$router.push({path: '/login'})
        this.$notify.success(res.data.message)
      }).catch(error => {
        this.$notify.error(error)
      })
    },

    openWin(val){
      if (val.isOpen){
        val.isOpen = false
        val.status = 2
      }else {
        val.isOpen = true
        val.status = 0
      }
    },

    //定时器
    timer(){
      let mythis=this;
      setInterval(() => {
        mythis.getTimeDate();
        mythis.getElectricity();
        mythis.getNetwork();
      },1000)

      // setInterval(() => {
      //   mythis.timerEmoji()
      // }, 60 * 1000)
    },

    // // 定时更换表情
    // timerEmoji(){
    //   var emoji = this.emojis;
    //   var number = Math.round(Math.random() * (emoji.length - 1));
    //   this.emoji = emoji[number]
    // },

    //查看是否联网
    getNetwork(){
      window.addEventListener("offline", function(e) {
      });

      window.addEventListener("online", function(e) {
      });
      this.isNetwork=window.navigator.onLine;
    },
    //获取日期与时间
    getTimeDate(){
      this.timeItem.date=new Date().toLocaleDateString();
      this.timeItem.time=new Date().toLocaleTimeString();
    },
    //获取当前电脑电量
    getElectricity(){
      let mythis=this;
      navigator.getBattery().then(function(battery) {
        // 是否正在充电，yes-充电
        mythis.electricity.batteryCharging=(battery.charging ? true : false);
        // 当前剩余电量
        mythis.electricity.batteryLevel=battery.level * 100 ;
        battery.addEventListener("chargingchange", function() {
        });
        battery.addEventListener("levelchange", function() {
        });
      });
    },
  }
}
</script>

<style scoped>
.task{
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  height: 100%;
  /*border: 1px solid black;*/
  /*border-bottom: .1rem solid black;*/
  /*border-radius: .4rem;*/
  background-color: rgba(0,0,0,0.2);
}

.task_logo{
  width: 100%;
  height: 100%;
  /*border: 1px solid black;*/
  background: url('../assets/icon/img_1.png') no-repeat;
  background-size: cover;
  margin-left: 1%;
  float: left;
  cursor: pointer;
}

.task_time{
  width: 7%;
  /*border: .1rem solid black;*/
  height: 100%;
  float: right;
  font-size: .7rem;
  font-weight: bolder;
}

.task_elect {
  font-weight: bolder;
  font-size: .7rem;
  width: 4%;
  /*border: 1px solid black;*/
  float: right;
  line-height: 1.9rem;
}

.task_elect_icon{
  /*border: 1px solid black;*/
  float: right;
  margin-top: .4rem;
  width: 35%;
  height: 1rem;
}

.task_net{
  width: 3%;
  /*border: 1px solid black;*/
  float: right;
  /*margin-right: 1%;*/
  /*line-height: 1.9rem;*/
}

.task_net_icon{
  /*border: 1px solid black;*/
  width: 35%;
  margin-top: .4rem;
}

.appList{
  width: 50%;
  height: 2.3rem;
  /*border: 1px solid black;*/
  float: right;
  margin-right: 1%;
}

.appTitle{
  width: 8%;
  border-radius: 1rem;
  font-size: .4rem;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: white;
  background-color: rgba(0,0,0,0.5);
  float: right;
  margin-left: .5%;
  font-weight: bolder;
  cursor: pointer;
}
.appTitle1{
  color: black;
  background-color: rgba(255,255,255,0.5);
}
.appTitle2{
  color: black;
  background-color: rgba(255,255,255,0.5);
}

/*.drop_menu{*/
/*  float: left;*/
/*  width: 2%;*/
/*  height: 2rem;*/
/*}*/
</style>